<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>day3练习</title>
<style type="text/css">
#bigbox{width:500px; height:500px; border:gray 10px solid; margin:0 auto;}
#box1{width:200px; height:500px; background:orange; float:left;}
#box2{width:300px; height:100px; background:red; float:left;}
#box3{width:150px; height:200px; background:yellow; float:left;}
#box41{width:150px; height:200px; background:blue; float:left;}
#box5{width:300px; height:200px; background:pink; float:left;}
/***********************************************/
#bigbox2{width:1060px; height:350px; border:gray 10px solid; margin:0 auto;}
#box21{width:1060px; height:20px; background:gray; float:left;}
#box22{width:700px; height:35px; background:blue; float:left;}
#box23{width:360px; height:35px; background:orange; float:left;}

/***********************************************/

#bigbox3{width:400px; height:400px; border:black 2px solid; margin:0 auto;}
#box31{width:300px; height:300px; background:pink; float:left;}
#box32{width:100px; height:100px; background:green; float:left;}
#box33{width:100px; height:100px; background:yellow; float:left;}
#box34{width:100px; height:100px; background:yellow; float:right;}
#box35{width:100px; height:100px; background:green; float:right;}
/***********************************************/
#bigbox4{width:306px; height:306px; border:black 1px solid; margin:0 auto;}
#box4{width:100px; height:100px; background:pink; border:black 1px solid; float:right;}
/***********************************************/
#bigbox5{width:742px; height:182px; border:gray 0.5px solid; margin:0 auto;}
#box51{width:60px; height:180px; border:gray 0.5px solid; float:left;}
#box52{width:60px; height:100px; background:black; float:left;}
#box53{width:60px; height:80px; float:left;}
#box54{width:60px; height:50px; background:black; float:left;}
#box55{width:60px; height:130px; float:left;}
/****************************************************/
#bigbox6{width:302px; height:302px; margin:0 auto; background:pink;}
.kuangao{width:100px; height:100px; float:left;}
.box61{border-right:black 1px solid; border-bottom:black 1px solid;}
.box62{border-bottom:black 1px solid;}
.box63{border-right:black 1px solid;}

</style>
/****************************************************/

</head>

<body>
<div id="bigbox">
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
    <div id="box41"></div>
    <div id="box5"></div>
</div>
<br /><br />
<hr />
<br /><br />
<!---------------------------------------------------------->
<div id="bigbox2">
    <div id="box21"></div>
    <div id="box22"></div>
    <div id="box23"></div>
    <div id="box21"></div>
    <div id="box22"></div>
    <div id="box23"></div>
    <div id="box21"></div>
    <div id="box22"></div>
    <div id="box23"></div>
    <div id="box21"></div>
    <div id="box22"></div>
    <div id="box23"></div>
    <div id="box21"></div>
    <div id="box22"></div>
    <div id="box23"></div>
    <div id="box21"></div>
    <div id="box22"></div>
    <div id="box23"></div>
    <div id="box21"></div>
</div>
<br /><br />
<hr />
<!---------------------------------------------------------->

<br /><br />
<div id="bigbox3">
    <div id="box31">1</div>
    <div id="box32">2</div>
    <div id="box33">3</div>
    <div id="box32">4</div>
    <div id="box34">5</div>
    <div id="box35">6</div>
    <div id="box34">7</div>
    <div id="box35">8</div>
</div>
<br /><br />
<hr />
<!---------------------------------------------------------->

<br /><br />
<div id="bigbox4">
        <div id="box4"></div>
        <div id="box4"></div>
        <div id="box4"></div>
        <div id="box4"></div>
        <div id="box4"></div>
        <div id="box4"></div>
        <div id="box4"></div>
        <div id="box4"></div>
        <div id="box4"></div>
</div>
<br /><br />
<hr />
<!---------------------------------------------------------->

<br /><br />
    <div id="bigbox5">
        <div id="box51">
            <div id="box52"></div>
            <div id="box53"></div>
        </div>
        <div id="box51">
            <div id="box54"></div>
            <div id="box55"></div>
        </div>
        <div id="box51">
            <div id="box52"></div>
            <div id="box53"></div>
        </div>
        <div id="box51">
            <div id="box54"></div>
            <div id="box55"></div>
        </div>
        <div id="box51">
            <div id="box52"></div>
            <div id="box53"></div>
        </div>
        <div id="box51">
            <div id="box54"></div>
            <div id="box55"></div>
        </div>
        <div id="box51">
            <div id="box52"></div>
            <div id="box53"></div>
        </div>
        <div id="box51">
            <div id="box54"></div>
            <div id="box55"></div>
        </div>
        <div id="box51">
            <div id="box52"></div>
            <div id="box53"></div>
        </div>
        <div id="box51">
            <div id="box54"></div>
            <div id="box55"></div>
        </div>
        <div id="box51">
            <div id="box52"></div>
            <div id="box53"></div>
        </div>
        <div id="box51">
            <div id="box54"></div>
            <div id="box55"></div>
        </div>
    </div>
<br /><br />
<hr />
<br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div id="bigbox6">
<div class="box61 kuangao"></div>
<div class="box61 kuangao"></div>
<div class="box62 kuangao"></div>
<div class="box61 kuangao"></div>
<div class="box61 kuangao"></div>
<div class="box62 kuangao"></div>
<div class="box63 kuangao"></div>
<div class="box63 kuangao"></div>
<div class="box64 kuangao"></div>
</div>

<br /><br />
<hr />
<br /><br />

</body>
</html>
